<!-- 彩虹走马灯 -->
<template>
        <div class="body">
            <div class="box">
                {{ $props.title }}
            </div>
        </div>
</template>

<script lang="ts" name="fleeTime">
export default {
    props: {
        title: {
            type: String,
            default: ''
        }
    },
}  
</script>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.body{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .box{
        min-width: 100px;
        width: 70%;
        max-width: 180px;
        padding:6px 15px;
        border-radius: 14px;
        color:#fff;
        font-size: 14px;
        position: relative;
        z-index: 0;
        overflow: hidden;
        text-align: center;
    }
    .box::before{
        content: "";
        width: 200%;
        height: 300%;
        background-color: #fff;
        background-image: conic-gradient(transparent,rgb(0,128,255),transparent 30%);
        position: absolute;
        left: -50%;
        top: -100%;
        z-index: -2;
        animation: rotate 5s linear infinite;
    }
    .box::after{
        content: "";
        inset: .4vmin;
        background: linear-gradient(180deg,rgb(88, 150, 250),#04c0feaf,);
        // background: rgb(88, 150, 250);
        border-radius: 14px;
        position:absolute;
        z-index: -1;
    }
    @keyframes rotate {
        100%{
            transform: rotate(360deg);
        }
        
    }
}
</style>
